<template>
  <div>
    <!-- 升降赛 -->
    <div v-if="types == 6">
      <div class="battle" :class="{border : index % 2 == 0, padding : index % 2 != 0}" v-for="(match, index) in match"
        :key="index">
        <div class="battle-top">
          <span class="player">
            <span v-if="match.site != match.user_name">
              {{ match.site.split(',').length > 1 ? match.site.split(',')[0] + '/' + match.site.split(',')[match.site.split(',').length - 1] : match.site }}
            </span>
            <span class="playerName" v-if="match.team_name == null">
              {{
                match.user_name.split(',').length > 1
                  ? match.user_name.split(',')[0] + '/' + match.user_name.split(',')[match.user_name.split(',').length - 1]
                  : match.user_name.replace(/,/g, '/')
              }}
            </span>
            <span class="playerName" v-if="match.team_name != null">{{ match.team_name }}</span>
            <span class="red" v-if="match.seed_num != null">[{{ match.seed_num }}]</span>
            <span v-if="match.one_limit != null">[{{ match.one_limit }}{{ match.two_limit }}{{ match.three_limit }}]</span>
            <van-icon v-if="match.win_site != null && match.win_site == match.sign_id" name="success" color="#42B574" />
            <span v-if="match.sign_id != 0 && match.waiver_user == match.sign_id"><span style="color: red;">(弃)</span></span>
          </span>
          <div class="score">
            <div v-for="(round_nums, index) in match.score" :key="index" style="display: flex;justify-content: flex-end;">
              <div class="point" v-if="match.score[index].top !== ''">
                {{ match.score[index].top }}
                <i v-if="match.score[index].tiebreak">{{ match.score[index].tiebreak }}</i>
              </div>
            </div>
            <div class="point" v-if="match.status == 2">{{ match.score_num.split(':')[0] }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 单淘汰 -->
    <div v-if="types == 3">
      <div class="battle battles" v-for="(match, index) in match" :key="index">
        <div class="battle-top">
          <span class="player">
            <span v-if="match.site_a != match.name_a">
              {{ match.site_a.split(',').length > 1 ? match.site_a.split(',')[0] + '/' + match.site_a.split(',')[match.site_a.split(',').length - 1] : match.site_a }}
            </span>
            <span class="playerName" v-if="match.team_name_a == null">
              {{
                match.name_a.split(',').length > 1
                  ? match.name_a.split(',')[0] + '/' + match.name_a.split(',')[match.name_a.split(',').length - 1]
                  : match.name_a.replace(/,/g, '/')
              }}
            </span>
            <span class="playerName" v-if="match.team_name_a != null">{{ match.team_name_a }}</span>
            <span class="red" v-if="match.seed_num_a != null">[{{ match.seed_num_a }}]</span>
            <span v-if="match.one_limit_a != null">[{{ match.one_limit_a }}{{ match.two_limit_a }}{{ match.three_limit_a }}]</span>
            <van-icon v-if="match.win_site != null && match.win_site.user_sign_id == match.sign_id_a" name="success"
              color="#42B574" />
            <span v-if="match.sign_id_a != 0 && match.waiver_user == match.sign_id_a"><span style="color: red;">(弃)</span></span>
          </span>
          <div class="score">
            <div v-for="(round_nums, index) in match.score" :key="index" style="display: flex;justify-content: flex-end;">
              <div class="point" v-if="match.score[index].top !== ''">
                {{ match.score[index].top }}
                <i v-if="match.score[index].tiebreak && match.score[index].top < match.score[index].bot">{{ match.score[index].tiebreak }}</i>
              </div>
            </div>
            <div class="point" v-if="match.status == 2">{{ match.score_num.split(':')[0] }}</div>
          </div>
        </div>
        <div class="battle-line"></div>
        <div class="battle-bot">
          <span class="player">
            <span v-if="match.site_b != match.name_b">
              {{ match.site_b.split(',').length > 1 ? match.site_b.split(',')[0] + '/' + match.site_b.split(',')[match.site_b.split(',').length - 1] : match.site_b }}
            </span>
            <span class="playerName" v-if="match.team_name_b == null">
              {{
                match.name_b.split(',').length > 1
                  ? match.name_b.split(',')[0] + '/' + match.name_b.split(',')[match.name_b.split(',').length - 1]
                  : match.name_b.replace(/,/g, '/')
              }}
            </span>
            <span class="playerName" v-if="match.team_name_b != null">{{ match.team_name_b }}</span>
            <span class="red" v-if="match.seed_num_b != null">[{{ match.seed_num_b }}]</span>
            <span v-if="match.one_limit_b != null">[{{ match.one_limit_b }}{{ match.two_limit_b }}{{ match.three_limit_b }}]</span>
            <van-icon v-if="match.win_site != null && match.win_site.user_sign_id == match.sign_id_b" name="success"
              color="#42B574" />
            <span v-if="match.sign_id_b != 0 && match.waiver_user == match.sign_id_b"><span style="color: red;">(弃)</span></span>
          </span>
          <div class="score">
            <div v-for="(score, index) in match.score" :key="index" style="display: flex;justify-content: flex-end;">
              <div class="point" v-if="match.score[index].bot !== ''">
                {{ match.score[index].bot }}
                <i v-if="match.score[index].tiebreak && match.score[index].bot < match.score[index].top">{{ match.score[index].tiebreak }}</i>
              </div>
            </div>
            <div class="point" v-if="match.status == 2">{{ match.score_num.split(':')[1] }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 判断types值 显示不同模板 -->

    <div v-if="types == 2 || types == 1 || types == 4">
      <div class="battle battles" v-for="(match, index) in match" :key="index">
        <div class="battle-top">
          <span class="player">
            <span v-if="match.site_a != match.name_a">
              {{ match.site_a.split(',').length > 1 ? match.site_a.split(',')[0] + '/' + match.site_a.split(',')[match.site_a.split(',').length - 1] : match.site_a }}
            </span>
            <span class="playerName" v-if="match.team_name_a == null">
              {{
                match.name_a.split(',').length > 1
                  ? match.name_a.split(',')[0] + '/' + match.name_a.split(',')[match.name_a.split(',').length - 1]
                  : match.name_a.replace(/,/g, '/')
              }}
            </span>
            <span class="playerName" v-if="match.team_name_a != null">{{ match.team_name_a }}</span>
            <span class="red" v-if="match.seed_num_a != null">[{{ match.seed_num_a }}]</span>
            <span v-if="match.one_limit_a != null">[{{ match.one_limit_a }}{{ match.two_limit_a }}{{ match.three_limit_a }}]</span>
            <van-icon v-if="match.win_site != null && match.win_site.user_sign_id == match.sign_id_a" name="success"
              color="#42B574" />
            <span v-if="match.sign_id_a != 0 && match.waiver_user == match.sign_id_a"><span style="color: red;">(弃)</span></span>
          </span>
          <div class="score">
            <div v-for="(round_nums, index) in match.score" :key="index" style="display: flex;justify-content: flex-end;">
              <div class="point" v-if="match.score[index].top !== ''">
                {{ match.score[index].top }}
                <i v-if="match.score[index].tiebreak && match.score[index].top < match.score[index].bot">{{ match.score[index].tiebreak }}</i>
              </div>
            </div>
            <div class="point" v-if="match.status == 2">{{ match.score_num.split(':')[0] }}</div>
          </div>
        </div>
        <div class="battle-line"></div>
        <div class="battle-bot">
          <span class="player">
            <span v-if="match.site_b != match.name_b">
              {{ match.site_b.split(',').length > 1 ? match.site_b.split(',')[0] + '/' + match.site_b.split(',')[match.site_b.split(',').length - 1] : match.site_b }}
            </span>
            <span class="playerName" v-if="match.team_name_b == null">
              {{
                match.name_b.split(',').length > 1
                  ? match.name_b.split(',')[0] + '/' + match.name_b.split(',')[match.name_b.split(',').length - 1]
                  : match.name_b.replace(/,/g, '/')
              }}
            </span>
            <span class="playerName" v-if="match.team_name_b != null">{{ match.team_name_b }}</span>
            <span class="red" v-if="match.seed_num_b != null">[{{ match.seed_num_b }}]</span>
            <span v-if="match.one_limit_b != null">[{{ match.one_limit_b }}{{ match.two_limit_b }}{{ match.three_limit_b }}]</span>
            <van-icon v-if="match.win_site != null && match.win_site.user_sign_id == match.sign_id_b" name="success"
              color="#42B574" />
            <span v-if="match.sign_id_b != 0 && match.waiver_user == match.sign_id_b"><span style="color: red;">(弃)</span></span>
          </span>
          <div class="score">
            <div v-for="(score, index) in match.score" :key="index" style="display: flex;justify-content: flex-end;">
              <div class="point" v-if="match.score[index].bot !== ''">
                {{ match.score[index].bot }}
                <i v-if="match.score[index].tiebreak && match.score[index].bot < match.score[index].top">{{ match.score[index].tiebreak }}</i>
              </div>
            </div>
            <div class="point" v-if="match.status == 2">{{ match.score_num.split(':')[1] }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="types == 5">
      <div v-for="(items, indexs) in match" :key="indexs" style="margin-bottom: 0.1rem;">
        <div>
          <span style="display: inline-block; width: 100%; text-align: center;margin: 0.1rem 0;font-size: 0.4rem;">{{ indexs + 1 }}区</span>
        </div>
        <div v-for="(item, indexs) in items" :key="indexs">
          <div>
            <span style="display: inline-block;width: 100%;text-align: center;">第{{ indexs + 1 }}轮</span>
          </div>
          <div class="battle battles" v-for="(matchs, index) in item" :key="index">
            <div class="battle-top">
              <span class="player">
                <span v-if="matchs.site_a != matchs.name_a">
                  {{ matchs.site_a.split(',').length > 1 ? matchs.site_a.split(',')[0] + '/' + matchs.site_a.split(',')[matchs.site_a.split(',').length - 1] : matchs.site_a }}
                </span>
                <span class="playerName" v-if="matchs.team_name_a == null">
                  {{
                    matchs.name_a.split(',').length > 1
                      ? matchs.name_a.split(',')[0] + '/' + matchs.name_a.split(',')[matchs.name_a.split(',').length - 1]
                      : matchs.name_a.replace(/,/g, '/')
                  }}
                </span>
                <span class="playerName" v-if="matchs.team_name_a != null">{{ matchs.team_name_a }}</span>
                <span class="red" v-if="matchs.seed_num_a != null">[{{ matchs.seed_num_a }}]</span>
                <span v-if="matchs.one_limit_a != null">[{{ matchs.one_limit_a }}{{ matchs.two_limit_a }}{{ matchs.three_limit_a }}]</span>
                <van-icon v-if="matchs.win_site != null && matchs.win_site.user_sign_id == matchs.sign_id_a" name="success"
                  color="#42B574" />
                <span v-if="matchs.sign_id_a != 0 && matchs.waiver_user == matchs.sign_id_a"><span style="color: red;">(弃)</span></span>
              </span>
              <div class="score">
                <div v-for="(round_nums, scoreIndex) in matchs.score" :key="scoreIndex" style="display: flex;justify-content: flex-end;"
                  v-if="matchs.score">
                  <div class="point" v-if="matchs.score[scoreIndex].top !== ''">
                    {{ matchs.score[scoreIndex].top }}
                    <i v-if="matchs.score[scoreIndex].tiebreak && matchs.score[scoreIndex].top < matchs.score[scoreIndex].bot">{{ matchs.score[scoreIndex].tiebreak }}</i>
                  </div>
                </div>
                <div class="point" v-if="matchs.status == 2">{{ matchs.score_num.split(':')[0] }}</div>
              </div>
            </div>
            <div class="battle-line"></div>
            <div class="battle-bot">
              <span class="player">
                <span v-if="matchs.site_b != matchs.name_b">
                  {{ matchs.site_b.split(',').length > 1 ? matchs.site_b.split(',')[0] + '/' + matchs.site_b.split(',')[matchs.site_b.split(',').length - 1] : matchs.site_b }}
                </span>
                <span class="playerName" v-if="matchs.team_name_b == null">
                  {{
                    matchs.name_b.split(',').length > 1
                      ? matchs.name_b.split(',')[0] + '/' + matchs.name_b.split(',')[matchs.name_b.split(',').length - 1]
                      : matchs.name_b.replace(/,/g, '/')
                  }}
                </span>
                <span class="playerName" v-if="matchs.team_name_b != null">{{ matchs.team_name_b }}</span>
                <span class="red" v-if="matchs.seed_num_b != null">[{{ matchs.seed_num_b }}]</span>
                <span v-if="matchs.one_limit_b != null">[{{ matchs.one_limit_b }}{{ matchs.two_limit_b }}{{ matchs.three_limit_b }}]</span>
                <van-icon v-if="matchs.win_site != null && matchs.win_site.user_sign_id == matchs.sign_id_b" name="success"
                  color="#42B574" />
                <span v-if="matchs.sign_id_b != 0 && matchs.waiver_user == matchs.sign_id_b"><span style="color: red;">(弃)</span></span>
              </span>
              <div class="score">
                <div v-for="(score, index) in matchs.score" :key="index" style="display: flex;justify-content: flex-end;">
                  <div class="point" v-if="matchs.score[index].bot !== ''">
                    {{ matchs.score[index].bot }}
                    <i v-if="matchs.score[index].tiebreak && matchs.score[index].bot < matchs.score[index].top">{{ matchs.score[index].tiebreak }}</i>
                  </div>
                </div>
                <div class="point" v-if="matchs.status == 2">{{ matchs.score_num.split(':')[1] }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'battle',
    data() {
      return {
        ballSite: 0,
        battleList: []
      };
    },
    props: {
      roundNum: Number,
      match: Array,
      keys: Array,
      types: Number
    }
  };
</script>

<style lang="less" scoped>
  .border {
    border-bottom: 1px #ccc solid;
  }

  .padding {
    margin-bottom: 0.2rem;
  }

  .red {
    color: red;
  }

  .green {
    font-size: 0.24rem;
    width: 0.5rem;
    line-height: 0.5rem;
    height: 100%;
    text-align: center;
    color: #8bc34a;
  }

  .m_b,
  .battles {
    margin-top: 0.2rem;
  }

  .battle {

    // margin: 0.2rem 0;
    .battle-top {
      height: 0.4rem;
      line-height: 0.4rem;
    }

    .battle-line {
      height: 1px;
      background: #bbbbbb;
    }

    .battle-bot {
      height: 0.5rem;
      line-height: 0.5rem;
    }

    .player {
      float: left;
      display: flex;

      // margin-left: 0.1rem;
      .playerName {
        // font-weight: bold;
        display: inline-block;
        font-size: 0.3rem;
        white-space: nowrap;
        max-width: 189px;
        overflow: hidden;
      }
    }

    .score {
      display: flex;
      justify-content: flex-end;
      height: 0.4rem;

      .point {
        width: 0.5rem;
        // height: 0.4rem;
        border-left: 0.02rem solid #bbbbbb;
        font-weight: bold;
        position: relative;

        i {
          font-style: normal;
          position: absolute;
          top: -4px;
          font-size: 0.24rem;
          font-weight: 400;
        }
      }
    }
  }
</style>
